<script>
import KtMap from "/src/components/common/KtMap.vue";
import MapSelectDialog from "/src/views/manage/iot/project/components/MapSelectDialog.vue";
import iot from "/src/js/iot/index.js";

export default {
  components: { MapSelectDialog, KtMap },
  data() {
    return {
      iot,
      show: false,
      editorShow: false,
      rules: {
        rule: [{ required: false }],
      },
      deviceArr: [],
      sensorArr: [],
      userArr: [],
      userAccountIdsStr: [],
      itemVisible: false,
      requestParam: {
        // id
        id: null,
        severityLevel: null,

        // 描述
        description: null,

        // 设备ID
        deviceId: null,

        // 设备传感器
        sensorId: null,

        /**
         * 类型
         * 1、val < x
         * 2、val > x
         * 3、x < val < y
         * 4、x = m
         * 5、val > x,over m minute
         * 6、val < x,over m minute
         * 7、Device offline
         */
        type: null,

        // 是否发送消息
        isMessage: false,

        // 是否启用
        isEnable: false,

        // 恢复通知
        isRecover: false,

        // x
        x: null,

        // y
        y: null,

        // m
        m: null,
      },
      loading: false,
    };
  },
  mounted() {},
  methods: {
    getByProjectId(projectId) {
      this.$kt.request.send({
        uri: "/business-iot-web/admin/projectUserAccount/getByProjectId",
        data: { projectId },
        stateSuccess: (res) => {
          this.userArr = res.data;
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
        },
      });
    },
    openNew(projectId) {
      console.log(projectId);
      this.$kt.request.send({
        uri: "/business-iot-web/admin/iotDevice/getByProjectId",
        data: { projectId: projectId },
        stateSuccess: (res) => {
          this.getByProjectId(projectId);
          this.deviceArr = res.data; // this.projectList = res.data;
          this.requestParam = {
            id: null,
            // 描述
            description: null,

            // 设备ID
            deviceId: null,

            // 设备传感器
            sensorId: null,

            /**
             * 类型
             * 1、val < x
             * 2、val > x
             * 3、x < val < y
             * 4、x = m
             * 5、val > x,over m minute
             * 6、val < x,over m minute
             * 7、Device offline
             */
            type: null,

            // 是否发送消息
            isMessage: false,

            // 是否启用
            isEnable: false,

            // 恢复通知
            isRecover: false,

            // x
            x: null,

            // y
            y: null,

            // m
            m: null,
          };
          this.requestParam.projectId = projectId + "";
          this.open(this.requestParam);
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
        },
      });
    },
    open(requestParam) {
      if (!requestParam) {
        this.requestParam = {
          id: null,
          // 描述
          description: null,

          // 设备ID
          deviceId: null,

          // 设备传感器
          sensorId: null,

          /**
           * 类型
           * 1、val < x
           * 2、val > x
           * 3、x < val < y
           * 4、x = m
           * 5、val > x,over m minute
           * 6、val < x,over m minute
           * 7、Device offline
           */
          type: null,

          // 是否发送消息
          isMessage: false,

          // 是否启用
          isEnable: false,

          // 恢复通知
          isRecover: false,

          // x
          x: null,

          // y
          y: null,

          // m
          m: null,
        };
        this.show = true;
        return;
      }

      this.requestParam = JSON.parse(JSON.stringify(requestParam));
      this.show = true;
    },
    // 关闭
    close() {
      this.show = false;
    },
    selectType () {
      this.requestParam.x = null
      this.requestParam.y = null
      this.requestParam.z = null

    },
    selectDevice(id) {
      console.log(id);
      console.log(this.deviceArr);
      this.deviceArr.map((item) => {
        if (item.id == id) {
          this.sensorArr = item.sensors;
        }
      });
      // if() {

      // }
    },
    // 地图选择
    mapSelect(data) {
      this.requestParam.longitude = data.longitude + "";
      this.requestParam.latitude = data.latitude + "";
      // 保留后5位
      this.requestParam.longitude = this.requestParam.longitude.substring(
        0,
        this.requestParam.longitude.indexOf(".") + 6
      );
      this.requestParam.latitude = this.requestParam.latitude.substring(
        0,
        this.requestParam.latitude.indexOf(".") + 6
      );
    },
    toSave() {
      if (this.loading) {
        return;
      }

      this.loading = true;
      let loading = this.$loading({
        lock: true,
        text: this.$i18n.zhToGlobal("保存中"),
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      this.$kt.request.send({
        uri: "/business-iot-web/admin/iotDeviceAlarm/save",
        data: {
          ...this.requestParam,
          userAccountIdsStr: JSON.stringify(this.userAccountIdsStr),
        },
        stateSuccess: (res) => {
          this.$message.success(this.$i18n.zhToGlobal("保存成功"));
          this.close();
          this.loading = false;
          loading.close();
          this.$emit("save");
          this.userAccountIdsStr = []
          this.requestParam = {
            id: null,
            // 描述
            description: null,

            // 设备ID
            deviceId: null,

            // 设备传感器
            sensorId: null,

            /**
             * 类型
             * 1、val < x
             * 2、val > x
             * 3、x < val < y
             * 4、x = m
             * 5、val > x,over m minute
             * 6、val < x,over m minute
             * 7、Device offline
             */
            type: null,

            // 是否发送消息
            isMessage: false,

            // 是否启用
            isEnable: false,

            // 恢复通知
            isRecover: false,

            // x
            x: null,

            // y
            y: null,

            // m
            m: null,
          };
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
          this.loading = false;
          loading.close();
        },
      });
    },
  },
};
</script>

<template>
  <el-dialog
    draggable
    width="700px"
    v-model="show"
    :title="$i18n.zhToGlobal('Description')"
    @close="close"
  >
    <el-scrollbar :style="{ height: 'calc(100vh - 150px)' }">
      <el-form
        label-position="top"
        :model="requestParam"
        label-width="80px"
        :rules="rules"
      >
        <!-- 并排写一个输入框和两个下拉框 -->
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item
              :label="$i18n.zhToGlobal('Alarm Description')"
              prop="rule"
            >
              <el-input v-model="requestParam.description"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item :label="$i18n.zhToGlobal('Device')" prop="rule">
              <el-select
                v-model="requestParam.deviceId"
                @change="selectDevice"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in deviceArr"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item :label="$i18n.zhToGlobal('Sensor')" prop="rule">
              <el-select v-model="requestParam.sensorId" placeholder="请选择">
                <el-option
                  v-for="item in sensorArr"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item :label="$i18n.zhToGlobal('Type')" prop="rule">
              <el-select v-model="requestParam.type" placeholder="请选择" @change="selectType">
                <el-option key="1" label="val > x" :value="1"> </el-option>
                <el-option key="2" label="val < y" :value="2"> </el-option>
                <el-option key="3" label="x < val < y" :value="3"> </el-option>
                <el-option key="4" label="val = x" :value="4"> </el-option>
                <el-option key="5" label="val > x,over m minute" :value="5">
                </el-option>
                <el-option key="6" label="val < x,over m minute" :value="6">
                </el-option>
                <el-option key="7" label="Device offline" :value="7">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- x y z -->
        <el-row :gutter="20">
          <el-col
            :span="12"
            v-if="
              requestParam.type == '1' ||
              requestParam.type == '3' ||
              requestParam.type == '4' ||
              requestParam.type == '5' ||
              requestParam.type == '6'
            "
          >
            <el-form-item :label="$i18n.zhToGlobal('X')">
              <el-input v-model="requestParam.x"></el-input>
            </el-form-item>
          </el-col>
          <el-col
            :span="12"
            v-if="requestParam.type == '2' || requestParam.type == '3'"
          >
            <el-form-item :label="$i18n.zhToGlobal('Y')">
              <el-input v-model="requestParam.y"></el-input>
            </el-form-item>
          </el-col>
          <el-col
            :span="12"
            v-if="requestParam.type == '5' || requestParam.type == '6'"
          >
            <el-form-item :label="$i18n.zhToGlobal('M')">
              <el-input v-model="requestParam.m"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item :label="$i18n.zhToGlobal('Contact inforamtion')">
              <el-select
                v-model="userAccountIdsStr"
                multiple
                placeholder="请选择"
              >
                <el-option
                  v-for="item in this.userArr"
                  :key="item.id"
                  :label="item.nickname"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <!-- <el-input v-model="requestParam.userAccountIdsStr"></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="$i18n.zhToGlobal('Message')" prop="rule">
              <el-select v-model="requestParam.isMessage" placeholder="请选择">
                <el-option :key="true" label="ON" :value="true"> </el-option>
                <el-option :key="false" label="OFF" :value="false"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$i18n.zhToGlobal('Enable or not')">
              <el-select v-model="requestParam.isEnable" placeholder="请选择">
                <el-option :key="true" label="Normal" :value="true">
                </el-option>
                <el-option :key="false" label="Pause" :value="false">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" v-if="requestParam.isMessage">
            <el-form-item
              :label="$i18n.zhToGlobal('Severity level： ')"
              prop="rule"
            >
              <el-select
                v-model="requestParam.severityLevel"
                placeholder="请选择"
              >
                <el-option key="1" label="Normal" value="1"> </el-option>
                <el-option key="2" label="Critical" value="2"> </el-option>
                <el-option key="3" label="Urgent" value="3"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="$i18n.zhToGlobal('* Recover notification ')"
              prop="rule"
            >
              <el-select v-model="requestParam.isRecover" placeholder="请选择">
                <el-option :key="true" label="ON" :value="true"> </el-option>
                <el-option :key="false" label="OFF" :value="false"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-scrollbar>

    <div style="height: 40px"></div>
    <el-row>
      <el-button type="primary" @click="toSave">{{ "Save" }}</el-button>
      <el-button @click="close">{{ $i18n.zhToGlobal("Cancel") }}</el-button>
    </el-row>
    <!-- <el-button
      @click="toSave"
      type="primary"
      style="
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-radius: 0 0 3px 3px;
      "
    >
      {{ $i18n.zhToGlobal("保存") }}
    </el-button> -->
  </el-dialog>
  <map-select-dialog
    @select="mapSelect"
    ref="mapSelectDialog"
  ></map-select-dialog>
</template>

<style scoped lang="scss">
.map-box {
  // 超出不显示
  overflow: hidden;
}

.gen-btn {
  cursor: pointer;
}

.gen-btn:hover {
  transform: scale(1.1);
}

.gen-btn:active {
  transform: scale(1);
}
</style>